<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 200px;
            width: 300px;
            background: pink;
        }
    </style>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            $("#btnGetOffset").click(function(){
                /*
                    获取一个div的offset(),返回值为一个对象：Object {top: 31, left: 8}
                    offset：是相对于文档左上角的坐标值
                    top: 相对于文档最上方
                    left：相对于文档最左边
                 */
                var offs = $("div").offset();
                console.log(offs);
            })

            //设置offset
            $("#btnSetOffset").click(function(){

                //如果设置offset的值，但是这个元素如果没有设置定位或者定位为static，那么offset会自动给该元素设置position的值为relative
                //如果设置offset的值，但是这个元素设置了定位，则offset不会自动给该元素设置position的值
                $("div").offset({
                    "top":300,
                    "left":400
                })
            })
        })
    </script>
</head>
<body>
    <button id="btnGetOffset">获取Offset</button>
    <button id="btnSetOffset">设置Offset</button>
    <div></div>
</body>
</html>